<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <title>“组团啦”杯人气投票</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vote/css/bootstrap-grid.css"/>
    <link rel="stylesheet" href="__PUBLIC__/vote/css/bootstrap-modal.css" />
    <link rel="stylesheet" href="__PUBLIC__/vote/css/reset.css" />
    <link rel="stylesheet" href="__PUBLIC__/vote/css/public1.css" />

    <style type="text/css">
        html,body{height:100%;}
        body{background-image: url(/Public/vote/img/bg.jpg); background-size: 100% 100%;}
    </style>
</head>
<body>
<ul class="select-menu" id="select-menu">
    <li><a href="javascript:;"><span>战队</span></a></li>
    <li><a href="javascript:;"><span id="position-select">位置</span></a></li>
    <li><a href="javascript:;"><span id="gender-select">性别</span></a></li>
    <div id="menu-box">
        <div class="menu-wrapper" id="team">
            <div><span data-value="">全部</span></div>
            <volist name="data1" id="d">
                <div><span data-value="{$d.corpsnumber}">{$d.corpsname}</span></div>
            </volist>
        </div>
        <div class="menu-wrapper" id="position">
            <div><span data-value="">全部</span></div>
            <div><span data-value="上单">上单</span></div>
            <div><span data-value="中单">中单</span></div>
            <div><span data-value="打野">打野</span></div>
            <div><span data-value="ADC">ADC</span></div>
            <div><span data-value="辅助">辅助</span></div>
        </div>
        <div class="menu-wrapper" id="gender">
            <div><span data-value="">全部</span></div>
            <div><span data-value="女">萌妹子</span></div>
            <div><span data-value="男">纯爷们</span></div>
            <div><span data-value="未知">非直男</span></div>
        </div>
    </div>
</ul>
<div id="or-wrapper" class="center-block">
    <div class="prize center-block margin-bottom-10" id="corps_div">

    </div>
    <div id="user">

    </div>
    <div id="mor_btn" style="display:none">
        <div class="oh margin-bottom-15">
            <div class="col-xs-6 col-xs-offset-3">
                <button class="btn-load btn beblock width100" onclick="initUser()" id="mor_btn_id">正在加载。。。</button>
            </div>
        </div>
    </div>
</div>


<input type="hidden" value="" id="corps">
<input type="hidden" value="" id="sex">
<input type="hidden" value="" id="weizhi">
<div id="click-area"></div>
<!--<a id="btn-reg" href="http://lol.xuanzhen-tech.com?channel=h"><img src="__PUBLIC__/vote/img/reg.png" alt="" width="100%"/></a>-->
<div class="modal fade" id="tip-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示:</h4>
            </div>
            <div class="modal-body">
                <p id="modal-text">良人~你确定要选TA做你唯一的英雄咩？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="do_vote()">确定</button>
                <button type="button" class="btn btn-default" onclick="qx()">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>请勿脚踏两只船！<br />每天只能爱一个！真爱~明天一定要来啊！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/vote/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/vote/js/bootstrap-modal.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    var page =1;
    var obj_dom;

    $("#btn-reg").on("touchstart",function(){
        $(this).children("img").attr("src","__PUBLIC__/vote/img/reg2.png");
    })
    function share () {
        var option = {
            title: '谁才是众望所归的王者！组团啦杯人气投票!', // 分享标题
            desc: '王者归属！名誉之战！硝烟燃起！成就TA吧，童鞋，现在就差你的一票！', // 分享描述
            link: "http://lol.xuanzhen-tech.com/index.php/Home/Vote/index.html", // 分享链接
            imgUrl: 'http://lol.xuanzhen-tech.com/Public/vote/img/vote.png', // 分享图标
        };
        wx.onMenuShareTimeline(option);
        wx.onMenuShareAppMessage(option);
        wx.onMenuShareWeibo(option);
        wx.onMenuShareQQ(option);
        wx.onMenuShareQZone(option);
    }
    $(function(){
        initUser();
        $(".menu-wrapper span").on("touchstart",function(){
            var sID=$(this).parents(".menu-wrapper")[0].id;
            $(this).addClass("menu-select").parent().siblings().children().removeClass("menu-select");
            $(this).parents(".menu-wrapper").slideUp();
            if(sID!="team"){
                var sW="#"+sID+"-select";
                if(sID=='gender'){
                    $("#sex").val($(this).data('value'));
                    page=1;
                    $("#user").html('');
                    $("#mor_btn_id").text("正在加载。。。");
                    initUser();
                }
                else if(sID=='position'){
                    $("#weizhi").val($(this).data('value'));
                    page=1;
                    $("#user").html('');
                    $("#mor_btn_id").text("正在加载。。。");
                    initUser();

                }
                $(sW).text($(this).text());
            }
            else if(sID=="team"){
                $("#corps").val($(this).data('value'));
                page=1;
                $("#user").html('');
                $("#mor_btn_id").text("正在加载。。。");
                corps();
                initUser();

            }
        })
        wx.ready(share);
        var wxData = {$js};
        wx.config(wxData);
    })

    function initUser(){
        var sex = $("#sex").val();
        var weizhi = $("#weizhi").val();
        var corps =$("#corps").val();
        $.getJSON("{:U('initUser')}?sex="+sex+"&weizhi="+weizhi+"&corps="+corps+"&p="+page,function(data){
            var totalPage=data.totalPage;
            var num = data.num;
            var data = data.data;
            var str='';
            for(var i=0;i<data.length;i++){
                str+='<div class="row margin-bottom-15 or-item">';
                str+='<div class="portrait-wrapper col-xs-3">';
                var picture = data[i].picture;
                str+='<img src="/Public/vote/userimg/'+picture+'" alt=""  class="portrait beblock beCircle"  width="100%"/>';
                str+='</div>';
                str+='<ul class="data-wrapper col-xs-6">';
                str+='<li><span class="name">'+data[i].name+'</span>'+data[i].game_position+'</li>';
                str+='<li>'+data[i].nickname+'</li>';
                str+='<li>'+data[i].school+'</li>';
                str+='</ul>';
                str+='<div class="bS-wrapper col-xs-3">';
                if(data[i].is_vote==1){
                    str+='<dl class="btn-support beCircle ss" data-id='+data[i].id+'>' +
                            '<dt>已支持</dt>';
                    str+='<dd>'+data[i].votes_num+'</dd>';
                    str+='</dl>'
                }
                else{
                    str+='<dl class="btn-support beCircle" data-id='+data[i].id+'>' +
                            '<dt>支持TA</dt>';
                    str+='<dd>'+data[i].votes_num+'</dd>';
                    str+='</dl>'
                }
                str+='</div></div>';
            }
            if(page>=totalPage){
                $("#mor_btn").hide();
            }
            else{
                $("#mor_btn_id").text("剩余"+num+"人");
                $("#mor_btn").show();

            }
            $("#user").append(str);
            page++;
            init();
        });
    }
    function init(){
        var sItem=$("#select-menu li"),lh,ob,sM=$("#select-menu"),
                orW=$("#or-wrapper"),pW=document.querySelector(".portrait").offsetWidth,support=$(".btn-support");
        $(".portrait").css("height",pW+"px");
        lh=sItem[0].offsetHeight-3;
        ob=window.innerHeight-document.getElementById("select-menu").offsetTop-lh-3;
        orW.css("margin-top",(sM[0].offsetTop+15)+"px");
        orW.css("height",(ob-30)+"px");
        sM.children("li").find("span").css("line-height",lh+"px");
        sM.css("height",(lh+3)+"px");
        document.getElementById("click-area").style.height=sM[0].offsetTop+"px";
        $(".menu-wrapper").css({"margin-top":lh+"px","height":ob+"px"});
        sM.children("li").on("touchstart",function(){
            var num=$(this).index();
            $(this).children("a").addClass("pressed").find("span").css("line-height",lh+3+"px");
            $("#menu-box").children("div").eq(num).slideDown().siblings().hide();
        })
        sM.children("li").on("touchstart",function(){
            $(this).children("a").removeClass("pressed").find("span").css("line-height",lh+"px");
        })
        $("#click-area").on("touchstart",function(){
            $(".menu-wrapper").slideUp();
        });
        $(".btn-support").on('click',function(){
            var obj = $(this);
            if(obj.hasClass('ss')){
                return;
            }
            obj_dom = obj;
            $.getJSON("{:U('is_vote')}",function(data){
                if(data.status==1){
                    $("#tip-modal").modal('show');
                }
                else{
                    $("#error-modal").modal('show');
                }
            })

        })
        //禁止触发底层滚动
        $("#position,#gender").on("touchmove",function(event){
            return false;
        })

    }
    function do_vote(){
        var id = obj_dom.data('id');
        $.getJSON("{:U('do_vote')}?id="+id,function(data){
            $("#tip-modal").modal('hide');
            if(data.status==1){
                obj_dom.addClass('ss');
                obj_dom.find('dt').text("已投票");
                obj_dom.find('dd').text(parseInt(obj_dom.find('dd').text())+1);

            }
            else{
                $("#error-modal").modal('show');
            }
        });
    }
    function corps(){
        var corpsnumber = $("#corps").val();
        if(corpsnumber==""){
            $("#corps_div").hide();
        }
        else{
            $.getJSON("{:U('corps')}?corpsnumber="+corpsnumber,function(data){
                var str='';
                if(data.ranking==1 && data.votes_num!=0){
                    str+='<div><img src="/Public/vote/img/cup-gold.png" alt="" width="100%"/></div>';
                }
                else if(data.ranking==2 && data.votes_num!=0){
                    str+='<div><img src="/Public/vote/img/cup-silver.png" alt="" width="100%"/></div>';
                }
                else if(data.ranking==3 && data.votes_num!=0){
                    str+='<div><img src="/Public/vote/img/cup-copper.png" alt="" width="100%"/></div>';
                }
                str+='<p>NO.'+data.ranking+'</p>';
                str+='<dl><dt>'+data.corpsname+'</dt><dd>'+data.remarks+'</dd></dl>';
                $("#corps_div").html(str);
                $("#corps_div").show();
            });

        }
    }
    function qx(){
        $("#tip-modal").modal('hide');
    }
</script>
</body>
</html>
